<template>
  <div>
    <div style="margin-top:-10px">
      <el-radio v-model="InlineRadio" label="1" @change="clickRadioShow($event)">数据源配置</el-radio>
      <!-- Inline-config表单 -->
      <div v-show="inlineShow" style="margin-top:5px">
        <el-form ref="form" :model="inlineToConfigure" label-width="120px" size="mini" :label-position="lablePosition">
          <el-form-item label="jdbc链接地址">
            <el-input v-model="inlineToConfigure.jdbcUrl"></el-input>
          </el-form-item>

          <el-form-item label="用户名">
            <el-input v-model="inlineToConfigure.username"></el-input>
          </el-form-item>

          <el-form-item label="密码">
            <el-input v-model="inlineToConfigure.password"></el-input>
          </el-form-item>

          <el-form-item label="jdbc驱动程序名称">
            <el-input v-model="inlineToConfigure.jdbcDriverName"></el-input>
          </el-form-item>

          <el-form-item label="连接池配置">
            <el-input v-model="inlineToConfigure.poolProperties"></el-input>
          </el-form-item>

          <el-form-item label="表名称">
            <el-input v-model="inlineToConfigure.tableName"></el-input>
          </el-form-item>

          <el-form-item label="字段长度">
            <el-input v-model="inlineToConfigure.fieldLength"></el-input>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div style="margin-top:5px">
      <el-radio v-model="InlineRadio" label="2" @change="clickRadioShow($event)">数据库</el-radio>
      <!-- Datasource表单 -->
      <div v-show="dataSourceShow" style="margin-top:5px">
        <el-form ref="form" :model="dataSourceConfigure" label-width="120px" size="mini" :label-position="lablePosition">
          <el-form-item label="数据源">
            <el-input v-model="dataSourceConfigure.datasource"></el-input>
          </el-form-item>
          <el-form-item label="连接池配置">
            <el-input v-model="dataSourceConfigure.poolProperties"></el-input>
          </el-form-item>
          <el-form-item label="表名称">
            <el-input v-model="dataSourceConfigure.SourceTableName"></el-input>
          </el-form-item>
          <el-form-item label="字段长度">
            <el-input v-model="dataSourceConfigure.SourceFieldLength"></el-input>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div style="margin-top:5px">
      <el-radio v-model="InlineRadio" label="3" @change="clickRadioShow($event)">Jndi配置</el-radio>
      <!-- Jndi-resource表单 -->
      <div v-show="resourceShow" style="margin-top:5px">
        <el-form ref="form" :model="jndiConfigure" label-width="120px" size="mini" :label-position="lablePosition">
          <el-form-item label="jndi资源">
            <el-input v-model="jndiConfigure.jndiResource"></el-input>
          </el-form-item>
          <el-form-item label="连接池配置">
            <el-input v-model="jndiConfigure.poolProperties"></el-input>
          </el-form-item>
          <el-form-item label="表名称">
            <el-input v-model="jndiConfigure.jndiTableName"></el-input>
          </el-form-item>
          <el-form-item label="字段长度">
            <el-input v-model="jndiConfigure.jndiFieldLength"></el-input>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      lablePosition: 'left',
      InlineRadio: "",
      inlineShow: false,
      dataSourceShow: false,
      resourceShow: false,
      inlineToConfigure: {
        jdbcUrl: "",
        username: "",
        password: "",
        jdbcDriverName: "",
        poolProperties: "",
        tableName: "",
        fieldLength: ""
      },
      dataSourceConfigure: {
        datasource: "",
        poolProperties: "",
        SourceTableName: "",
        SourceFieldLength: ""
      },
      jndiConfigure: {
        jndiResource: "",
        poolProperties: "",
        jndiTableName: "",
        jndiFieldLength: ""
      },
    }
  },
  mounted() { },
  methods: {
    clickRadioShow(value) {
      if (value == "1") {
        this.inlineShow = true;
        this.dataSourceShow = false;
        this.resourceShow = false;
      }
      if (value == "2") {
        this.inlineShow = false;
        this.dataSourceShow = true;
        this.resourceShow = false;
      }
      if (value == "3") {
        this.inlineShow = false;
        this.dataSourceShow = false;
        this.resourceShow = true;
      }
    }
  },
}
</script>

<style>
</style>